<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wa">
    <title></title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        #box{
            width: 600px;
            height: 206px;
            margin: 0 auto;
            border: 1px solid #ccc;
            position: relative;
            overflow: hidden;
        }
        ul,li,p,span{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box .top{
            width: 100%;
            height: 36px;
            background-image: url(img/btn_cartoon.gif);
            background-position: 5px 0;
            position: relative;
        }
        #box .top p{
            width: 88px;
            height: 36px;
            background-position: 0 -101px;
            background-image: url(img/btn_cartoon.gif);
            display: inline-block;
            /*border: 1px solid red;*/
        }
        #box .top ul{
            height: 36px;
            display: inline-block;
            line-height: 36px;
            position: absolute;
            top:0px;
            margin-left: 10px;

        }
        #box .top ul li{
            width: 8px;
            height: 8px;
            display: inline-block;
            line-height: 15px;
            background-image: url(img/btn_cartoon.gif);
            background-position: 0 -320px;
        }
        #box .top ul .active{
            background-image: url(img/btn_cartoon.gif);
            background-position: 0 -220px;
        }
        #box .top .left{
            width: 30px;
            height: 20px;
            background-image: url(img/btn_cartoon.gif);
            background-position: 0 -402px;
            position: absolute;
            top:8px;
            left: 170px;
            cursor: pointer;
        }
        #box .top .right{
            width: 30px;
            height: 20px;
            background-image: url(img/btn_cartoon.gif);
            background-position: -30px -402px;
            position: absolute;
            top:8px;
            left: 200px;
            cursor: pointer;
        }
        #box .top a{
            position: absolute;
            right: 10px;
            top:8px;
            text-decoration: none;
            color: #007acc;
        }
        #box .top a:hover{
            color: red;
            text-decoration: underline;
        }

        #box .big {
            /*display: inline-block;*/
            width: 600px;
            height: 168px;
            position: absolute;
        }
        #box .big ul{
            width: 600px;
            height: 168px;
            float: left;
            position: absolute;
        }
        #box .big ul:nth-of-type(2){
            left: 600px;
        }
        #box .big ul:nth-of-type(3){
            left: 1200px;
        }
        #box .big ul:nth-of-type(4){
            left: 1800px;
        }
        #box .big ul li{
            display: inline-block;
            margin: 10px 7px;
            margin-left: 8px;
            list-style: none;
        }
        #box .big a{
            display: block;
            margin: 8px 0 5px 0;
            text-decoration: none;
            color: #007acc;
        }
        #box .big a:hover{
            color: red;
            text-decoration: underline;
        }
        #box .big span{
            color: gray;
        }
        #box  .big ul{
            /*position: absolute;
            right: -600px;*/
            /*display: none;*/
            float: left;
        }
      
    </style>
</head>
<body>
    <div id="box">
        <div class="top">
            <p></p>
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <span class="left"></span>
            <span class="right"></span>
            <a href="#">更多&gt;&gt;</a>
        </div>
            <div class="big">
                <ul>
                    <li>
                        <img src="img/01.jpg" alt="">
                        <a href="#">海贼王</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/01.jpg" alt="">
                        <a href="#">海贼王</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/01.jpg" alt="">
                        <a href="#">海贼王</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/01.jpg" alt="">
                        <a href="#">海贼王</a>
                        <span>播放:28276</span>
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="img/02.jpg" alt="">
                        <a href="#">哆啦A梦</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/02.jpg" alt="">
                        <a href="#">哆啦A梦</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/02.jpg" alt="">
                        <a href="#">哆啦A梦</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/02.jpg" alt="">
                        <a href="#">哆啦A梦</a>
                        <span>播放:28276</span>
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="img/03.jpg" alt="">
                        <a href="#">火影忍者</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/03.jpg" alt="">
                        <a href="#">火影忍者</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/03.jpg" alt="">
                        <a href="#">火影忍者</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/03.jpg" alt="">
                        <a href="#">火影忍者</a>
                        <span>播放:28276</span>
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="img/04.jpg" alt="">
                        <a href="#">七龙珠</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/04.jpg" alt="">
                        <a href="#">七龙珠</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/04.jpg" alt="">
                        <a href="#">七龙珠</a>
                        <span>播放:28276</span>
                    </li>
                    <li>
                        <img src="img/04.jpg" alt="">
                        <a href="#">七龙珠</a>
                        <span>播放:28276</span>
                    </li>
                </ul>
        </div>
    </div>
</body>
</html>
<script>

    var index=0;
    var left=0;

    // 减
    $('.left').click(function(){     
        index--;

        left=left+600;
        if(index<0){
            index=3;
            // console.log(index);
            left=-1800;  
        }
        $('.big').stop().animate({
                left:left,
        });
        active(index);
    });

    // 加
    $('.right').click(function(){
        index ++;
        
        left=left-600;
        if(index>3){
            index=0;
            left=0;
        }
        $('.big').stop().animate({
            left:left,
        });
        console.log(index);
        active(index);
    });
    
    // 改变小点的
    function active(index){
        $('#box .top li').eq(index).addClass('active').siblings().removeClass('active');
    }

</script>